<script>
import { defineComponent } from "vue";
import { loginList } from "@/api/login";
import * as echarts from "echarts";

export default defineComponent({
    data() {
        return {
            info: {
                id: '',
                email: '',
                rid: '',
                username: ''
            },
        }
    },
    methods: {
        init() {
            // 绘制图表
            this.myChart1.setOption({
                graphic: {
                    elements: [
                        {
                            type: 'text',

                            top: 'center',
                            style: {
                                text: "个人信息",
                                fontSize: 50,
                                fontWeight: 'bold',
                                lineDash: [0, 200],
                                lineDashOffset: 0,
                                fill: 'transparent',
                                stroke: 'red',
                                lineWidth: 1
                            },
                            keyframeAnimation: {
                                duration: 3000,
                                loop: true,
                                keyframes: [
                                    {
                                        percent: 0.7,
                                        style: {
                                            fill: 'transparent',
                                            lineDashOffset: 200,
                                            lineDash: [200, 0]
                                        }
                                    },
                                    {
                                        // Stop for a while.
                                        percent: 0.8,
                                        style: {
                                            fill: 'transparent'
                                        }
                                    },
                                    {
                                        percent: 1,
                                        style: {
                                            fill: 'aqua'
                                        }
                                    }
                                ]
                            }
                        }
                    ]
                }
            });
        },
        init2() {
            // 绘制图表
            this.myChart2.setOption({
                legend: {},
                tooltip: {},
                dataset: {
                    source: [
                        ['product', '2020', '2021', '2022'],
                        ['第一季度', 43.3, 85.8, 93.7],
                        ['第二季度', 83.1, 73.4, 55.1],
                        ['第三季度', 86.4, 65.2, 82.5],
                        ['第四季度', 72.4, 53.9, 39.1]
                    ]
                },
                xAxis: { type: 'category' },
                yAxis: {},
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
            });
        },

    },
    mounted() {
        // 基于准备好的dom，初始化echarts实例
        this.myChart1 = echarts.init(document.getElementById("main"));
        this.myChart2 = echarts.init(document.getElementById("main3"));
        // 绘制图表
        this.init();
        this.init2();

        loginList({
            username: 'admin',
            password: '123456',
        }).then(res => {
            console.log(res.data.data)
            this.info = res.data.data
            console.log(this.info)
        })
    },
});
</script>

<template>
    <div>
        <!-- <h1>柱状图表</h1> -->

        <div id="main"></div>
        <div id="main2">
            <div class="demo-type">
                <div>
                    <el-avatar :size="100" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                </div>
            </div>
            <h2>邮箱:<span>{{ this.info.email }}</span> </h2>
            <h2>用户ID: <span>{{ this.info.id }}</span></h2>
            <h2>用户名:<span>{{ this.info.username }}</span> </h2>
            <h2>手机号:<span>{{ this.info.mobile }}</span> </h2>
            <h2>用户角色ID:<span>{{ this.info.rid }}</span> </h2>
        </div>
        <div id="main3">
        </div>
    </div>
</template>

<style lang="scss" scoped>
.demo-type {
    display: flex;
}

.demo-type>div {
    flex: 1;
    text-align: center;
}

.demo-type>div:not(:last-child) {
    border-right: 1px solid var(--el-border-color);
}

#main {
    width: 300px;
    height: 100px;
    color: aqua;
}

#main2 {
    width: 400px;
    height: 400px;
    border-radius: 30%;
    background-color: rgba($color: #1addf728, $alpha: .4);

    h2 {
        text-align: center;
        margin-bottom: 30px;
    }
}
#main3{
    width: 1200px;
    height: 600px;
    float: right;
    margin-top: -400px;
}
</style>
